<!--  -->
<template>
  <div class="w-100P flex-sub flex-column">
    <!-- 导航 -->
    <div class="nav-container w-100P flex-row align-center">
      <div class="back-icon" @click.stop="handleBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="title">任务列表</div>
      <div class="tag">{{title}}</div>
    </div>

    <div class="line"></div>
    <div class="task-container flex-column flex-sub">
      <!-- 添加按钮 -->
      <div class="flex-row justify-between align-center">
        <!-- 添加按钮 -->
        <custom-button @click="handleAdd" />
        <div>
          <el-input
            v-model="queryInfo.keyword"
            placeholder="请输入搜索条件"
            @keyup.enter.native="getCardPageList"
          >
            <i
              class="el-icon-search el-input__icon"
              slot="suffix"
              @click.stop="getCardPageList"
            ></i>
          </el-input>
        </div>
      </div>

      <div class="flex-sub table-container">
        <el-table
          v-loading="loading"
          :data="tableData"
          height="100%"
          header-cell-class-name="table-header-cell"
          header-row-class-name="table-header-row"
        >
          <el-table-column prop="name" label="任务名称" />
          <el-table-column prop="region.name" label="负责区域" />
          <el-table-column prop="remark" label="地点描述 " />
          <el-table-column prop="createTime" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | dateFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            :width="handleScreenWidthToVw(100)+'px'"
            align="center"
          >
            <template slot-scope="scope">
              <div class="flex-row">
                <div class="btn-edit" @click="handleClick(scope.row)">修改</div>
                <div class="pd-lr-10 fz-14" style="color: #333;">|</div>
                <div class="btn-delete" @click="handleDelete(scope.row)">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- table -->

      <!-- 分页 -->
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next, total, jumper"
        :total="total"
        :page-size="queryInfo.pageSize"
      />
    </div>

    <edit-dialog
      ref="editDialog"
      :init-data="initData"
      :is-show="isShowEdit"
      @close="handleCloseEdit"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
// import { apiGetCarPageList, apiAddCarInfo, apiEditCarInfo, apiDeleteCarInfo } from './api.js'
import {
  apiAddSecurityTask,
  apiUpdateSecurityTask,
  apiFindSecurityTaskList,
  apiDelSecurityTask,
} from './api'
import dayjs from 'dayjs'
import EditDialog from './components/detail-edit-dialog'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  components: { EditDialog },

  filters: {
    dateFormat(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    expireDateFormat(value) {
      if (!value) return '已过期'
      const expireTime = dayjs(value).valueOf()
      const currentTime = dayjs().valueOf()
      const time = expireTime - currentTime
      if (time <= 0) return '已过期'

      return `剩余${dayjs(value).diff(dayjs(), 'day')}天`
    },
  },
  data() {
    return {
      queryInfo: {
        keyword: '',
        tagId: '',
        pageSize: 10,
        pageNo: 1,
      },
      total: 0,
      tableData: [],
      isShowEdit: false,
      isAdd: false,
      selectId: '',
      initData: {},
      loading: false,
      title: '',
    }
  },

  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },

  created() {
    this.title = this.$route.query.title
    this.queryInfo.tagId = this.$route.query.id
    this.getCardPageList()
  },
  methods: {
    handleAdd() {
      this.isAdd = true
      this.isShowEdit = true
      this.initData = { tagId: this.queryInfo.tagId, title: this.title }
    },
    async getCardPageList() {
      this.loading = true
      try {
        // TODO 查询接口
        const data = await apiFindSecurityTaskList({ ...this.queryInfo })
        if (!data) return
        this.total = data.total || 0
        this.tableData = data.records || 0
      } finally {
        this.loading = false
      }
    },
    handleCloseEdit() {
      this.isShowEdit = false
    },
    async handleSubmit(form) {
      try {
        // TODO 新增修改接口
        this.isAdd ? await apiAddSecurityTask(form) : await apiUpdateSecurityTask(form)
        this.$message.success(this.isAdd ? '新增成功！' : '修改成功！')
        this.isShowEdit = false
        this.getCardPageList()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.$refs.editDialog && this.$refs.editDialog.handleCloseLoading()
      }
    },
    handleClick(item) {
      this.isAdd = false
      this.isShowEdit = true
      this.initData = { ...item }
    },
    handleBack() {
      this.$router.back()
    },
    handleDelete(item) {
      this.$confirm(
        '你确定要删除该任务类型吗？删除后，该类型的所有任务将同步删除 且无法复原。',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        try {
          // TODO 删除接口
          await apiDelSecurityTask(item)
          this.$message.success('删除成功！')
          this.getCardPageList()
        } catch (msg) {
          this.$message.error(msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.task-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}

.query-container {
  display: flex;
  flex-direction: row;
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.nav-container {
  height: vh(54px);

  .back-icon {
    margin-left: vw(20px);

    &:hover {
      cursor: pointer;
    }
  }

  .title {
    margin-left: vw(8px);
    font-size: vw(14px);
    color: #333;
  }

  .tag {
    padding: vh(4px) vh(10px);
    margin-left: vw(20px);
    font-size: vw(14px);
    color: #0084ee;
    background: #dde3f9;
    border: 1px solid #0084ee;
    border-radius: vh(12px);
  }
}

.line {
  width: 100%;
  height: vh(10px);
  background: #f3f4f8;
}

::v-deep .el-table__body-wrapper.is-scrolling-none {
  height: 100% !important;
}
</style>
